<template>
  <div>
    <!-- <div class="bg_grey_all"></div> -->
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >申请设备维护</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-cell>
          <template #icon>
            <div>
              <van-image
                style="width: 120px; height: 80px; max-width: 100%"
                :src="require('../../../../assets/images/car_1.jpeg')"
              />
            </div>
          </template>
          <template #title>
            <div style="margin-left: 5px">
              <div style="font-size: 14px; color: #949494">
                {{ vehicle.vehicleBrand.brandName }} -
                {{ vehicle.vehicleSeries.seriesName }}({{
                  vehicle.vehicleColor
                }})
              </div>
              <div style="font-size: 16px">
                <van-tag v-if="vehicle.vehicleType === 1" type="primary"
                  >试</van-tag
                >
                <van-tag v-else-if="vehicle.vehicleType === 2" type="primary"
                  >客</van-tag
                >
                <van-tag v-else-if="vehicle.vehicleType === 3" type="primary"
                  >救</van-tag
                >
                <van-tag v-else type="primary">{{
                  vehicle.vehicleType
                }}</van-tag>
                {{ vehicle.plateNum }}
              </div>
              <div>VIN号:{{ vehicle.vinNo }}</div>
              <!-- <div>{{vehicle.company.companyName}}</div> -->
            </div>
          </template>
        </van-cell>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell title="申请设备维护" class="bg_grey" />
        <van-form>
          <van-field label="车辆照片" :value="isUpperVehiclePic" readonly>
          </van-field>

          <van-field label="行驶证照片" :value="isUpperLicensePic" readonly />

          <van-field label="绑定设备" :value="isBindSN" readonly />

          <van-field
            readonly
            clickable
            name="picker"
            :value="handleRepair"
            label="维护方式"
            placeholder="点击选择维护方式"
            @click="show_handleRepair_list = true"
          />
          <van-popup v-model="show_handleRepair_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="handleRepair_list"
              @confirm="onHandleRepairSelected"
              @cancel="show_handleRepair_list = false"
            />
          </van-popup>

          <van-field
            v-model="message"
            autosize
            label="情况简述"
            type="textarea"
            maxlength="200"
            placeholder="请输入申请设备维护事由"
            show-word-limit
          />

          <van-cell>
            <div style="color: #666666; font-size: 14px">
              <div>操作说明：</div>

              <div>1. 当绑定设备为“未安装”时，维护方式只可以选择“设备新装”。</div>

              <div>
                2.
                如果申请维护方式是“设备换修或设备拆除”时，请在“情况简述”中简要描述维护问题。
              </div>

              <div>3. 申请设备维护前需确保车辆照片及行驶证照片已上传。</div>
            </div>
          </van-cell>

          <div style="margin: 16px">
            <van-button block type="primary" @click="commit">提交</van-button>
          </div>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Api } from "../../../../api/api_config";
import { Toast } from 'vant'

export default {
  data() {
    return {
      vehicle: {},
      currentUser: {},

      show_handleRepair_list: false,
      handleRepair: "",
      handleRepair_id: 0,
      handleRepair_list: [
        { text: "设备新装", id: 1 },
        { text: "设备换修", id: 2 },
        { text: "设备拆除", id: 3 },
      ],
      isUpperVehiclePic: "",
      isUpperLicensePic: "",
      isBindSN: "",
      message: "",
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = false;
      this.vehicle = this.$store.state.vehicle;
      this.currentUser = this.$store.state.configuration.currentUser;
      this.vehicle.vehicleAttachmentList.length > 0
        ? (this.isUpperVehiclePic = "已上传")
        : (this.isUpperVehiclePic = "未上传");
      this.vehicle.licenseAttachmentList.length > 0
        ? (this.isUpperLicensePic = "已上传")
        : (this.isUpperLicensePic = "未上传");
      // deviceStatus  UnInstall = 1,//未安装 Installed = 2//已安装  maintain = 3//维护中
      switch (this.vehicle.deviceStatus) {
        case 1:
          this.isBindSN = '未安装'
          break;
        case 2:
          this.isBindSN = '已安装'
          break;
        case 3:
          this.isBindSN = '维护中'
          break;
        default:
          this.isBindSN = '未安装'
          break;
      }
    },
    back() {
      this.$router.push("/carUsage/carManage");
    },
    onHandleRepairSelected(value) {
      this.handleRepair = value.text
      this.handleRepair_id = value.id
      this.show_handleRepair_list = false
    },
    commit() {

      let data = {
        vehicleId: this.vehicle.id,
        contact: this.currentUser.name,
        type: this.handleRepair_id,
        contactPhone: this.currentUser.phoneNumber,
        applyMemo: this.message,
        deviceMaintainType: 0
      }

      let that = this;
      this.$axios({
        method: Api.maintain.maintain.method,
        url: Api.maintain.maintain.url,
        data: data
      })
        .then(function () {
          Toast.success("申请成功")
          that.$router.push('/carUsage/carManage')
        })
        .catch(function (e) {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped>
</style>
